import * as React from 'react'
import { Menu, Icon, Spin, Dropdown, Avatar, Divider } from 'antd'
import { Link } from 'react-router-dom'
import * as style from './index.less'
// import Debounce from 'lodash-decorators/debounce'
export interface Props {
  currentUser: any
  collapsed: boolean
  isMobile: boolean
  topMenuIndex: number
  menuData: Array<any>
  logo: string
  logout: () => void
  onTopMenuClick: () => void
  onMenuClick: () => void
  onCollapse: (collapsed: boolean) => void
}
export interface Event {
  cancel: () => void
}

const getIcon = (icon?: string): any => {
  if(icon) {
    if (icon.indexOf('http') === 0) {
      return <img src={icon} alt="icon" className={`icon sider-menu-item-img`} />
    }else if (icon.indexOf('icon') ===0) {
      return <i className={`icon anticon ${icon}`}></i>
    }
    return <Icon type={icon} />
  }
  return icon
}

export default class GlobalHeader extends React.Component<Props, {}> {
  componentWillUnmount() {
    // this.triggerResizeEvent.cancel();
  }

  // @Debounce(600)
  triggerResizeEvent(): any {
    const event = document.createEvent('HTMLEvents')
    event.initEvent('resize', true, false)
    window.dispatchEvent(event)
  }
  toggle= () => {
    const { collapsed, onCollapse } = this.props
    onCollapse(!collapsed)
    this.triggerResizeEvent()
  }
  render() {
    
    const {
      currentUser = {},
      collapsed,
      isMobile,
      logo,
      menuData,
      onMenuClick,
      onTopMenuClick,
      logout
    } = this.props
    const menu = (
      <Menu className={style.menu} selectedKeys={[]} onClick={onMenuClick}>
        <Menu.Item disabled>
          <Icon type="user" />个人中心
        </Menu.Item>
        {/* <Menu.Item disabled>
          <Icon type="setting" />设置
        </Menu.Item>
        <Menu.Item key="triggerError">
          <Icon type="close-circle" />触发报错
        </Menu.Item> */}
        <Menu.Divider />
        <Menu.Item key="logout" onClick={logout}>
          <Icon type="logout"/>退出登录
        </Menu.Item>
      </Menu>
    )
    return (
      <div className={style.header}>
        {isMobile && [
          <Link to="/" className={style.logo} key="logo">
            <img src={logo} alt="logo" width="32" />
          </Link>,
          <Divider type="vertical" key="line" />,
        ]}
        <Icon
          className={style.trigger}
          type={collapsed ? 'menu-unfold' : 'menu-fold'}
          onClick={this.toggle}
        />
        <Menu
          mode="horizontal"
          defaultSelectedKeys={['0']}
          className = {style.topMenu}
          style={{ lineHeight: '64px' }}
          onClick = {onTopMenuClick}
        >
          { menuData.map( (row, index) => (<Menu.Item key={index}>{getIcon(row.icon)}{row.name}</Menu.Item>))}
        </Menu>
        <div className={style.right}>
          {currentUser.name ? (
            <Dropdown overlay={menu}>
              <span className={`${style.action} ${style.account}`}>
                <Avatar size="small" className={style.avatar} src={currentUser.avatar} />
                <span className={style.name}>{currentUser.name}</span>
              </span>
            </Dropdown>
          ) : (
            <Spin size="small" style={{ marginLeft: 8 }} />
          )}
        </div>
      </div>
    );
  }
}
